<template>
	<div class="score-analysis-container">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>试题分析报告</span>
					<el-button type="primary" @click="goToAnalysis">上传新报告</el-button>
				</div>
			</template>

			<!-- 报告列表 -->
			<el-table :data="reportList" border style="width: 100%">
				<el-table-column prop="fileName" label="报告名称" width="500" />
				<el-table-column prop="uploadTime" label="上传时间">
					<template #default="scope">
						{{ standardDateTime(scope.row.uploadTime) }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80">
					<template #default="scope">
						<el-button type="primary" link @click="downloadReport(scope.row)">下载</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import { getFileSpecificService } from '@/api/file'
import { baseURL } from '@/utils/request'
import { standardDateTime } from '@/Tools/Time/date'

const router = useRouter()
const userStore = useUserStore()
const userId = userStore.userInfo.userInfo.userId

// 报告列表
const reportList = ref<
	{
		id: number
		fileName: string
		uploadTime: string
		className: string
		subjectName: string
		fileUrl: string
	}[]
>([])

// 获取报告列表
const fetchReportList = async () => {
	try {
		const res = await getFileSpecificService({ userId: userId, fileType: 'document' })
		reportList.value = res.data.data
	} catch (error) {
		console.error('获取报告列表失败:', error)
		ElMessage.error('获取报告列表失败')
	}
}

// 下载报告
const downloadReport = (report: any) => {
	const link = document.createElement('a')
	link.href = baseURL + '/public/uploads/' + report.fileName
	link.download = report.fileName
	document.body.appendChild(link)
	link.click()
	document.body.removeChild(link)
}

// 跳转到分析页面
const goToAnalysis = () => {
	router.push('/teacher/subject/analysis/upload')
}

onMounted(() => {
	fetchReportList()
})
</script>

<style scoped>
.score-analysis-container {
	padding: 20px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
